<!--
 * @Author: 郑堪侠
 * @Date: 2022-11-23 13:39:38
 * @LastEditTime: 2022-11-23 17:28:37
 * @FilePath: \commonTemplated:\3\安卓HTML\ganwei-app\src\components\app-drag\index.vue
 * @Description: 内容描述
 * Copyright (c) 2022 by 敢为软件, All Rights Reserved.
-->
<template>
    <el-dialog class="drapElDialog" :visible.sync="showDragDialog" @close="closeDragDialog(false)" :close-on-click-modal="true" width="300px" center>
        <div class="verification" data-action="loginVerification">
            <div id="__Verification" class="__Verification" data-action="loginVerificationContainer">
            </div>
        </div>
    </el-dialog>
</template>

<script>
import $ from 'jquery';
export default {
    name: 'app-drag',
    components: {},
    props: {
        dragCodeFlag: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            dragLoading: false,
            showDragDialog: false
        }
    },
    computed: {

    },
    created () {
        this.showDragDialog = this.dragCodeFlag;
    },
    mounted () {

    },
    watch: {
        dragCodeFlag (newvalue, oldvalue) {
            this.showDragDialog = newvalue;
            this.initDrag();
        }
    },
    methods: {
        closeDragDialog (isfalg) {
            let that = this;
            setTimeout(function () {
                that.showDragDialog = false;
                that.$emit('reLogin', isfalg);
            }, 1000);

        },
        initDrag () {
            let that = this;
            if (!that.showDragDialog) { return; }
            let adressIp = process.env.NODE_ENV == 'development' ? process.env.devServerIP : document.location.origin;
            that.$nextTick(function () {
                $('#__Verification').slide({
                    imgspec: '300*200',
                    __url: adressIp,
                    successCallBack: function () {
                        that.closeDragDialog(true);

                    }
                });
            });

        }
    }
}
</script>

<style lang='scss' scoped>
.app-drag {
    .verification {
        width: 100%;
        height: 250px;
    }

    .__Verification {
        width: 100%;
        height: 100%;
        border-radius: 6px;
    }
}
.drapElDialog {
    /deep/ .el-dialog__header {
        display: none;
    }
    /deep/ .el-dialog__body {
        padding: 0 !important;

        #drag {
            position: relative;
            background-color: #e8e8e8;
            height: 50px;
            line-height: 50px;
            text-align: center;
            z-index: 9999;
        }
        #drag .handler {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 36px;
            height: 50px;
            border: 1px solid #ccc;
            cursor: move;
        }
        .handler_bg {
            background: #fff
                url("")
                no-repeat center;
        }
        .handler_ok_bg {
            background: #fff
                url("")
                no-repeat center;
        }
        #drag .drag_bg {
            background-color: #7ac23c;
            height: 50px;
            width: 0px;
            position: absolute;
            left: 0;
            top: 0;
        }
        #drag .drag_text {
            font-size: 13px;
            color: #4a4a4a;
            position: absolute;
            top: 0px;
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
            -o-user-select: none;
            -ms-user-select: none;
        }
        .cut_bg {
            float: left;
            margin: 0 !important;
            border: 0px;
            padding: 0 !important;
        }
        .xy_img_bord {
            -webkit-box-shadow: 0 0 15px #0cc;
            -moz-box-shadow: 0 0 15px #0cc;
            box-shadow: 0 0 15px #0cc;
            top: 32px;
            left: 0px;
            display: none;
            border: 1px solid rgb(255, 255, 255);
        }
        #xy_img {
            z-index: 999;
            width: 40px;
            height: 40px;
            position: relative;
        }
        .refesh_bg {
            height: 30px;
            width: 30px;
            background: url(../../assets/Images/refresh.png) no-repeat
                center/100%;
            position: absolute;
            top: 10px;
            display: none;
        }
        .vcode-hints {
            position: absolute;
            z-index: 0;
            text-align: center;
            color: rgba(74, 74, 74, 0.7);
            font-size: 15px;
        }

        #__Verification {
            overflow: hidden;
        }
    }
}
</style>